import { useEffect } from 'react'
import { useAppDispatch, useAppSelector, type RootState } from '../../store/store'
import { fetchHomepageData } from '../../store/homepageSlice';
import styles from './js.module.css'
import ys1 from '../../img/ys1.png'
function JX() {
    const dispatch = useAppDispatch();
    const { data } = useAppSelector((state: RootState) => state.homepage);

    useEffect(() => {
        dispatch(fetchHomepageData());
    }, [dispatch]);
    return (
        <div>
            <div className={styles.jx}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span className={styles.jxys}>精选医生</span>
                    <span className={styles.ck}>
                        查看更多 &gt;
                    </span>
                </div>
                <div className={styles.doctorList}>
                    {data?.strictly_selected_doctor?.doctors?.slice(0, 4).map((item, idx) => {
                        const info = item.doctor_info;
                        return (
                            <div key={info.doctor_id || idx} className={styles.doctorCard}>
                                <div className={styles.doctorHeader}>
                                    <div className={styles.avatarContainer}>
                                        <img className={styles.yq} src={info.image || ys1} alt={info.name} />
                                        <div className={styles.onlineIndicator}>在线</div>
                                    </div>
                                    <div className={styles.doctorInfo}>
                                        <div className={styles.doctorName}>{info.name}</div>
                                        <div className={styles.doctorTitle}>{info.title} {info.clinic_name}</div>
                                        <div className={styles.doctorHospital}>{info.hospital_name}</div>
                                    </div>
                                </div>
                                <div className={styles.badgeRow}>
                                    {info.is_3a_hospital && (
                                        <span className={`${styles.badge} ${styles.badgeSanjia}`}>三甲</span>
                                    )}
                                    {info.is_top_100_hospital && (
                                        <span className={`${styles.badge} ${styles.badgeBaiqiang}`}>百强医院</span>
                                    )}
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>

    )
}

export default JX